<template>
    <div class="admin-index">
        {{account}}登录成功,编号是{{userId}}

        <div class="con">

            <div class="left">
                <el-row class="tac">
                    <el-col :span="24">
                        <h5>自定义颜色</h5>
                        <el-menu
                                default-active="2"
                                class="el-menu-vertical-demo"
                                @open="handleOpen"
                                @close="handleClose"
                                background-color="#545c64"
                                text-color="#fff"
                                active-text-color="#ffd04b"
                                :router=true>
                            <el-submenu index="1">
                                <template slot="title">
                                    <i class="el-icon-location"></i>
                                    <span>用户管理</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="1-1" route="admin">用户信息管理</el-menu-item>
                                    <el-menu-item index="1-2" route="adminResetDel">已删除用户恢复</el-menu-item>
                                    <el-menu-item index="1-3" route="adminResetLock">黑名单恢复</el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>

                            <el-submenu index="2">
                                <template slot="title">
                                    <i class="el-icon-menu"></i>
                                    <span >宠物管理</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="1-1" route="adminPet">宠物信息管理</el-menu-item>
                                    <el-menu-item index="1-2" route="adminPetAdd">添加宠物信息</el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>

                            <el-submenu index="3" >
                                <template slot="title">
                                    <i class="el-icon-document"></i>
                                    <span >领养管理</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="1-1" route="adminAdoption">领养宠物信息管理</el-menu-item>
                                    <el-menu-item index="1-2" route="adminPermissionAdopation">批准领养宠物信息</el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>
                            <el-submenu index="4">
                                <template slot="title">
                                    <i class="el-icon-setting"></i>
                                    <span >寄养管理</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="1-1" route="adminPetstorage">寄养宠物信息管理</el-menu-item>
                                    <el-menu-item index="1-2" route="adminPermissionPetStorage">批准寄养宠物信息</el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>
                        </el-menu>
                    </el-col>
                </el-row>
            </div>


            <div class="info">
                <div class="search">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
                        <el-form-item label="id">
                            <el-input v-model="formInline.id" placeholder="id"></el-input>
                        </el-form-item>
                        <el-form-item label="领养人名子">
                            <el-input v-model="formInline.name" placeholder="领养人名"></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>

                <div class="right-bo">
                    <el-table
                            :data="tableData"
                            border
                            style="width: 100% ;">
                        <el-table-column
                                prop="id"
                                label="id"
                                width="50">
                        </el-table-column>
                        <el-table-column
                                prop="user.uname"
                                label="领养人"
                                width="140">
                        </el-table-column>
                        <el-table-column
                                prop="user.age"
                                label="领养人年龄"
                                width="140">
                        </el-table-column>
                        <el-table-column
                                prop="user.avatar"
                                label="领养人照片"
                                width="190">
                            <template slot-scope="scope"><!--slot-scope:作用域插槽，获取父组件的数据   path-->
                                <img style="width: 160px;height: 100px" :src="require('@/assets/img/'+scope.row.user.avatar)">
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="user.phone"
                                label="电话"
                                width="150">
                        </el-table-column>
                        <el-table-column
                                prop="pet.name"
                                label="宠物名"
                                width="100">
                        </el-table-column>
                        <el-table-column
                                prop="info"
                                label="宠物照片"
                                width="190">
                            <template slot-scope="scope"><!--slot-scope:作用域插槽，获取父组件的数据   path-->
                                <img style="width: 160px;height: 100px" :src="require('@/assets/img/'+scope.row.pet.img)">
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="adoption_date"
                                label="领养时间"
                                width="160">
                        </el-table-column>
                        <el-table-column
                                label="操作">
                            <template slot-scope="scope" ><!--slot-scope：作用域插槽，可以获取父组件的数据-->
                                <el-button  type="primary" @click="delAdoption(scope.row.id,scope.row.pet.id)">删除</el-button>
                            </template>

                        </el-table-column>

                    </el-table>
                    <el-pagination
                            @current-change="changePage"
                            background
                            layout="prev, pager, next"
                            :total="1000">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>

    .con{
        display: flex;
    }
    .left {
        width: 10%;
        background-color: antiquewhite;
    }


    .info{
        display:block;
        width: 100%;
        background-color: #2c3e50;
    }
    .right-bo {
        width: 90%;
        margin-left: 10px;
        background-color: #42b983;
    }
</style>
<script>
    export default {
        name: "AdminAdoption",
        data(){
            return {
                account: '',
                userId: '',
                index:1,
                tableData: [],
                formInline: {
                    name:"",
                    id:"",
                },


            }
        },
        mounted() {//钩子函数

            // 从sessionStore中获取数据
            this.userId=sessionStorage.getItem("userId");
            this.account=sessionStorage.getItem("account");

            console.log("vue-index.vue   钩子函数")
            console.log(this.account)
            this.$http.get("http://localhost:8081/adoption/getAllAdoption?index="+this.index+"&isAdopted="+true).then(req => {
                console.log("get"+"  "+this.index)
                //给data中的tableDat赋值
                this.tableData=req.data.list;
                this.index=req.data.index;
                console.log(this.tableData)
            })
        },
        methods: {

            delAdoption(id,petId){
                this.$http.get("http://localhost:8081/adoption/delAdoptionById?id="+id+"").then(req => {
                    this.$http.get("http://localhost:8081/adoption/getAllAdoption?index="+this.index+"&isAdopted="+true).then(req => {
                        console.log("get"+"  "+this.index)
                        //给data中的tableDat赋值
                        this.tableData=req.data.list;
                        this.index=req.data.index;
                        console.log(this.tableData)
                    })
                })
            },
            onSubmit(){
                console.log(this.formInline)
                if(this.formInline.id==""&&this.formInline.name==""){
                    console.log("查询全部")
                    this.$http.get("http://localhost:8081/adoption/getAllAdoption?index="+1+"&isAdopted="+true).then(req => {
                        //给data中的tableDat赋值
                        this.tableData=req.data.list;
                        this.index=req.data.index;
                        console.log(this.tableData)
                    })
                }else if(this.formInline.id!=""&&this.formInline.name==""){
                    console.log("id查询")
                    this.$http.get("http://localhost:8081/adoption/findById?id="+this.formInline.id+"&isAdopted="+true+"").then(req => {
                        console.log(req.data)
                        //给data中的tableDat赋值
                        this.tableData=req.data;

                    })
                }else if(this.formInline.id==""&&this.formInline.name!=""){
                    console.log("info查询")
                    this.$http.get("http://localhost:8081/adoption/findByUname?uname="+this.formInline.name+"&isAdopted="+true+"").then(req => {
                        console.log(req.data)
                        //给data中的tableDat赋值
                        this.tableData=req.data;

                    })
                }else{
                    alert("单个条件查询")
                }

            },
            changePage(index){
                console.log("change paeg"+index)
                this.$http.get("http://localhost:8081/adoption/getAllAdoption?index="+index+"&isAdopted="+true).then(req=>{
                    //从后台的map中获取list给data中的tableData赋值
                    this.tableData=req.data.list;
                    //从后台的map中获取index给data中的index赋值
                    this.index=req.data.index;
                    console.log(this.tableData)
                })
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
</script>

